<template>
  <div class="app-container">
    <el-form v-if="show" ref="params" v-permission="['sys:login-log:page']" :model="params" :inline="true" class="search-form">
      <el-form-item label="登录地址" prop="title">
        <el-input v-model="params.title" />
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select v-model="params.state" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.itemCode"
            :label="item.itemName"
            :value="item.itemCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="params.createTime"
          type="daterange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="findPage">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetForm('params')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row class="btn-group" type="flex" justify="space-between">
      <el-col span="20">
        <el-button
          v-permission="['sys:login-log:deleteAll']"
          type="success"
          icon="el-icon-delete"
          @click="removeAll"
        >清空</el-button>
        <el-button
          v-permission="['sys:login-log:deleteIds']"
          type="danger"
          icon="el-icon-delete"
          :disabled="multipleSelection.length===0"
          @click="remove"
        >删除</el-button>
        <el-button v-permission="['sys:login-log:export']" type="warning" icon="el-icon-download">导出</el-button>
      </el-col>
      <el-col span="4" align="right">
        <el-tooltip class="item" effect="dark" :content="show?'隐藏搜索':'显示搜索'" placement="top">
          <el-button icon="el-icon-search" circle @click="show = !show" />
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button icon="el-icon-refresh" circle @click="findPage" />
        </el-tooltip>
      </el-col>
    </el-row>
    <el-table
      ref="multipleTable"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      :data="data"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        label="序号"
        type="index"
        align="center"
      />
      <el-table-column
        prop="createUserName"
        label="用户名称"
        align="center"
      />
      <el-table-column
        prop="ipAddress"
        label="登录ip"
        align="center"
      />
      <el-table-column
        prop="address"
        label="登录地址"
        align="center"
      />
      <el-table-column
        prop="client"
        label="浏览器"
        align="center"
      />
      <el-table-column
        prop="sysName"
        label="操作系统"
        align="center"
      />
      <el-table-column
        prop="state"
        label="状态"
        align="center"
      />
      <el-table-column
        prop="rsres"
        label="操作信息"
        align="center"
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
      />
      <el-table-column label="操作" width="200px" align="center">
        <template slot-scope="{row}">
          <div>
            <el-button
              v-permission="['sys:log:delete']"
              type="text"
              icon="el-icon-delete"
              @click="remove(row.id)"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="total"
      class="table—page"
      :current-page="page.current"
      :page-sizes="[10, 20, 30, 50,100]"
      :page-size="page.size"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { findPage, remove, removeIds, removeAll } from '@/api/sys/login-log'

export default {
  name: 'Login',
  data() {
    return {
      id: null,
      roleId: null,
      data: [],
      options: [{ itemCode: '成功', itemName: '成功' }, { itemCode: '失败', itemName: '失败' }],
      show: true,
      page: { 'current': 1, 'size': 10 },
      params: { title: '', state: null, createTime: null },
      total: 0,
      dialogShow: false,
      multipleSelection: [],
      itemShow: false
    }
  },
  created() {
    this.findPage()
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.page.size = val
      this.findPage()
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.findPage()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    async findPage() {
      const page = { ...this.page }
      const params = { ...this.params }
      if (params.createTime) {
        params.startTime = params.createTime[0]
        params.endTime = params.createTime[1]
      }
      delete params.createTime
      const { data } = await findPage(page, params)
      this.data = data.records
      this.total = data.total
    },
    edit(id) {
      this.dialogShow = true
      this.id = typeof id === 'number' ? id : this.multipleSelection[0].id
    },
    remove(id) {
      this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        if (typeof id === 'number') {
          await remove(id)
          await this.findPage()
        } else {
          const ids = []
          this.multipleSelection.map(val => {
            ids.push(val.id)
          })
          await removeIds(ids)
          await this.findPage()
        }
      })
    },
    removeAll() {
      this.$confirm('此操作将清空记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await removeAll()
        await this.findPage()
      })
    }
  }
}
</script>

<style scoped>

</style>
